/**
 * Created by chenqiming on 16/4/16.
 */

import  {
    Text,
    View,
    Dimensions,
    Image,
    TouchableOpacity,
    StyleSheet,
    Platform
} from 'react-native';

import React from 'react';

import RightItemHeight from './RightItemHeight';


let {height, width} = Dimensions.get('window');
var ds;

export default class AlphabetaList extends React.Component {
    static propTypes = {
        scroll: React.PropTypes.func
    };

    constructor(props) {
        super(props);
        this.cellHeight = 0;    //右侧a-z小格子的高度
        this.state = {
            CityText:[]
        }
    }

    rightRows() {
        let arr = [];
        for (let i = 0; i < this.state.CityText.length; i++) {
            arr.push(
                <Text onLayout={(e)=>{
                        this.cellHeight = e.nativeEvent.layout.height;
                    }}
                      style={styles.rightText} key={i}>{ this.state.CityText[i] }</Text>
            );
        }
        return arr;
    }

    moveScroll(e) {
        let num = Math.floor((e.nativeEvent.pageY - 70) / this.cellHeight);
        if (num < 0) {
            num = 0;
        }
        if (num > this.props.RightItemText.length) {
            num = this.props.RightItemText.length;
        }
        let scroll = 0;
        if(num > 0) {
            let bottomDistance = 0;
            let sumHeight = 0;
            let i = 0;
            let j = 1;
            for (var e in RightItemHeight) {
                sumHeight += RightItemHeight[e];
            }
            let prev = 0;
            for (obj in RightItemHeight) {
                if (i == num) {
                    break;
                } else {
                    i++;
                    scroll += RightItemHeight[obj];
                }
            }
            for (obj2 in RightItemHeight) {
                if (j > i) {
                    bottomDistance += RightItemHeight[obj2];
                } else {
                    j++;
                }
            }

            if (Platform.OS === 'ios') {
                if (bottomDistance < height) {
                    scroll = sumHeight - height;
                }
            }
        }


        this.props.scroll().scrollTo({x: 0, y: scroll, animated: false});
    }

    componentDidMount(){
        let _self = this;
        setTimeout(()=>{
            _self.setState({
                CityText: this.props.RightItemText
            })
        },1000)
    }

    render() {
        if(this.state.CityText.length === 0){
            return (<View></View>)
        }
        return (
            <View onTouchStart={(e)=>{this.moveScroll(e)}}
                  onTouchMove={(e)=>{this.moveScroll(e)}} style={styles.rightRows}>
                {this.rightRows()}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    containerIOS: {
        paddingTop: 20,
        flex: 1,
        backgroundColor: '#fff'
    },
    containerAndroid: {
        flex: 1,
        backgroundColor: '#fff'
    },
    head: {
        backgroundColor: '#fff'
    },
    searchBar: {
        height: 46,
        backgroundColor: '#e3e3e3'
    },
    search: {
        backgroundColor: '#f5f5f5',
        height: 30,
        borderColor: '#ccc',
        borderRadius: 5,
        borderWidth: 1,
        marginLeft: 17,
        marginRight: 17,
        marginTop: 7,
        paddingLeft: 5
    },
    rightRows: {
        flex: 1,
        position: 'absolute',
        top: Platform.OS == 'ios'?80:70,
        right: 5,
        flexDirection: 'column',
        backgroundColor: '#a0959595',
        borderRadius:10,
        paddingTop:5,
        paddingBottom:5
    },
    rightText: {
        padding: 0,
        fontSize: 11,
        width: 25,
        textAlign: 'center',
        color: '#555',
        paddingTop:5
    },
    listItem: {
        alignItems: 'center',
        marginLeft: 10,
        marginRight: 10,
        marginTop:10,
        marginBottom:10,
        flexDirection: 'row'
    },
    line: {
        height: 1,
        backgroundColor: '#eee',
        marginLeft: 10,
        marginRight: 30
    },
    searchImg: {
        width: 17,
        height: 17,
    },
    searchBtn: {
        position: 'absolute',
        top: 13,
        right: 24
    },
    img: {
        width: 48,
        height: 48,
        marginRight: 9
    },
    listTitle: {
        position: 'relative',
        top: -1,
        paddingLeft: 10,
        paddingTop: 3,
        paddingBottom: 3,
        backgroundColor: '#eee'
    },
    listTitleText: {
        fontSize: 12,
        color: '#777'
    },
    searchBarContainer:{
        flexDirection:'row',
        height: Platform.OS === 'ios' ? 68 : 48,
        backgroundColor:'#FFF',
        justifyContent:'space-between',
        paddingRight:10,
        paddingTop: Platform.OS === 'ios' ? 20 : 0,
    },
    searchInput:{
        flexDirection:'row',
        alignSelf:'center',
        justifyContent: 'center',
        backgroundColor:'#F0F0F0',
        borderRadius:5,
        paddingLeft:10
    },
    searchIcon:{
        width:16,
        height:16,
        alignSelf:'center',
        justifyContent: 'center',
    },
    searchTextInput:{
        flex:1,
        fontSize:14,
        padding:Platform.OS === 'ios' ? 15 : 0,
        paddingLeft:6,
        color:'black'
    },
});
